<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="bootstrap-5.3.0-dist/css/bootstrap.min.css">
  <style>
    .item {
      position: relative;
      display: inline-block;
    }
    .popover-content {
      background-color: #e1e1e1;
      padding: 10px;
      text-align: center;
    }
  </style>  
</head>
<body>
  <div class="container mt-5">
    <div class="item">
      <button class="btn btn-danger delete-btn" data-bs-toggle="popover">删除</button>
      <div class="popover-content d-none">
        <p>您确定要删除这个项目吗？</p>
        <button class="btn btn-primary confirm-btn">确定</button>
        <button class="btn btn-secondary cancel-btn">取消</button>
      </div>
    </div>
  </div>
  <script src="js/jquery-3.3.1.js"></script>
  <script src="bootstrap-5.3.0-dist/js/bootstrap.bundle.min.js"></script>
  <script>
    $(document).ready(function (){
      var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
      var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
      });
      $('.delete-btn').on('click', function () {
        $(this).siblings('.popover-content').toggleClass('d-none');
      });
      $('.confirm-btn').on('click', function () {
        $(this).closest('.item').remove();
        $(this).parents('.popover-content').toggleClass('d-none');
        var popover = bootstrap.Popover.getInstance(document.querySelector('[data-bs-toggle="popover"]'));
        popover.hide();
      });
      $('.cancel-btn').on('click', function () {
        $(this).parents('.popover-content').toggleClass('d-none');
        var popover = bootstrap.Popover.getInstance(document.querySelector('[data-bs-toggle="popover"]'));
        popover.hide();
      });
    });
  </script>  
</body>
</html>